<template>
  <!-- <div class="wrapper">Home</div> -->
  <!-- <ModalComponent /> -->

  <el-button @click="handleShowDrawer">展示抽屉</el-button>

  <!-- <Pagination :page-object="pageObject" @page-change="pageChange" /> -->

  <form-drawer v-model:isShow="isShow" v-model:isLoading="isLoading" title="抽屉标题" size="20%">
    <el-form ref="ruleFormRef" :model="ruleForm">
      <el-form-item label="姓名" props="name">
        <el-input v-model="ruleForm.name" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="ruleForm.age" placeholder="请输入年龄" />
      </el-form-item>
    </el-form>
  </form-drawer>
</template>

<script setup lang="ts">
// 模块引入
import { ref, watch, reactive } from 'vue'
// import type { FunctionalComponent } from 'vue'
// import ModalComponent from '@/components/modalComponent/index.vue'
// import Pagination from '@/components/pagination/index.vue'
// import type { IPageObject, IPageDTO } from '@/types/common'
// import FormDrawer from '@/components/formDrawer/index.vue'

// const pageObject = reactive<IPageObject>({
//   total: 30,
//   pageSize: 10
// })
// function pageChange(page: IPageDTO) {
//   console.log(page)
// }

// interface IFormDrawerRef extends FunctionalComponent {
//   open: () => void
// }
// const drawerRef = useTemplateRef<IFormDrawerRef>('drawerRef')
// const handleShowDrawer = () => {
//   drawerRef.value?.open()
// }
// console.log(import.meta.env)
const ruleForm = reactive<{
  name: string
  age: string
}>({
  name: '',
  age: ''
})
const isShow = ref(false)
const handleShowDrawer = () => {
  isShow.value = true
}
const isLoading = ref(true)
defineOptions({
  name: 'Home',
  inheritAttrs: false
})
watch(isShow, (val) => {
  console.log(val)

  setTimeout(() => {
    isLoading.value = !val
  }, 2000)
})
</script>

<style scoped lang="scss">
.wrapper {
  width: 500px;
  height: 300px;
  background-color: red;
  text-align: center;
  color: #fff;
  font-size: 30px;
}
</style>
